<template>
    <div id="app">
        <v-myheader></v-myheader>
        <el-container :style="{'height':winHeight+'px'}">
            <el-aside width="200px" :style="{'height':winHeight+'px'}">
                <!-- 项目初始化打开的列1,2默认打开  3 不打开 -->
                <el-menu :default-openeds="['1','2']" :style="{'height':winHeight+'px'}">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>起始页面</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <router-link to='home'>欢迎页面</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>舆情报告</template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">
                                <router-link to='report'>全部舆情</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-2">
                                <router-link to='positivereport'>正面舆情</router-link>
                            </el-menu-item>
                            <el-menu-item index="2-3">
                                <router-link to='negativereport'>负面舆情</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>


                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>舆情设置</template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1">
                                <router-link to='keywords'>舆情关键字设置</router-link>
                            </el-menu-item>
                            <el-menu-item index="3-2">
                                <router-link to='alarm'>舆情报警设置</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container class="main">
                <router-view></router-view>
            </el-container>
        </el-container>



        <!-- <router-link to='/'>首页</router-link>
        <router-link to='/alarm'>警告</router-link>
        <router-link to='/keywords'>关键字</router-link>
        <router-link to='/report'>报表</router-link> -->
        <!-- <router-view></router-view> -->
    </div>
</template>

<script>
    import MyHeader from './components/MyHeader.vue'
    export default {
        name: 'electronvue03',
        data() {
            return {
                // 
                winHeight: document.documentElement.clientHeight,
                values: null,
            }
        },
        sockets: {
            connect: function () {
                //Vue客户端和socket.io服务器端建立连接以后触发的方法
                this.values = 'da';
                console.log('socket connected')
            },
            customEmit: function (val) {
              
                //console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
            }
        },
        methods: {
            clickButton: function () {
                // $socket is socket.io-client instance
                this.$socket.emit('message', 123456);
                console.log("123");
            }
        },

        components: {
            'v-myheader': MyHeader
        },
        mounted() {
            // 在根组件中监听网络变化


            // // 监听右键菜单
            // window.addEventListener('contextmenu', (e) => {
            //     // 首先要阻止浏览器默认行为
            //     e.preventDefault();
            //     // 给主进程广播事件，注意用到this需要注意他的指向
            //     this.$electron.ipcRenderer.send('contextmenu');
            // }, false)



            window.onresize = () => {

                this.winHeight = document.documentElement.clientHeight;
            }
        },

    }
</script>

<style lang="scss">
    /* CSS */
    * {
        margin: 0;
        padding: 0;
    }

    html {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .content {
        width: 100%;
        background: #F8F8F8;
    }

    .el-container {
        width: 100%;

        .el-aside {
            position: fixed;
            width: 200px;
            background-color: #EEE;

            .el-menu {
                background-color: #EEE;

                a {
                    color: #333;
                    display: block;
                    text-decoration: none;
                }
            }
        }

        .main {
            overflow-x: hidden;
            overflow-y: scroll;
            margin-left: 200px;
        }
    }

    /* 全局表格css样式设置 */
    .content {
        background: #F8F8F8;

        .main_top {
            padding: 5px;
        }

        .pageTable {
            width: 98%;
            margin: 5px;
            // 将双线条只留一个线条
            border-collapse: collapse;
            border: 1px solid #eeeeee;

            tr {
                width: 100%;
                height: 40px;
                line-height: 20px;

                th {
                    min-width: 100px;
                    border: 1px solid #eeeeee;
                }

                td {
                    /*超出隐藏还未解决 */
                    border: 1px solid #eeeeee;
                    text-align: center;

                    .red {
                        color: red;
                    }
                }
            }
        }

        .page {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    }

    /*去掉应用部分的 会多出一个滚动条位置 */
    .el-popup-parent--hidden {
        padding-right: 0 !important;
    }

    .v-modal {
        opacity: 0.8 !important;
    }
</style>